<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../Ajs/vue.js"></script>
</head>
<body>
    <div id="box">
        {{comName}} <br>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>
        <a href="#/shenghuo">生活</a>

        <component :is="comName"></component>
<!--        component显示对应的组件-->
    </div>

    <script>
        const caijing = {
            template:"<h2>财经信息</h2>"
        };
        var vm = new Vue({
            el:"#box",
            data:{
                comName:"caijing"
            },
            components:{
                keji:{
                    template:"<h2>科技信息</h2>"
                },
                caijing,
                yule:{
                    template:"<h2>娱乐信息</h2>"
                },
                shenghuo:{
                    template:"<h2>生活信息</h2>"
                }
            }
        });

        //监听window 的onhashchange 事件，根据获取到的hash值，显示对应组件的内容
        window.onhashchange = function(){
            //通过location.hash 获取到hash值
            switch (location.hash.slice(1)) {
                case "/keji":
                    vm.comName = "keji";
                    break;
                case "/caijing":
                    vm.comName = "caijing";
                    break;
                case "/yule":
                    vm.comName = "yule";
                    break;
                case "/shenghuo":
                    vm.comName = "shenghuo";
                    break;
            }
        }
    </script>
</body>
</html>
